<template>
	<gracePage statusBarBG="#EB5D4B" :customHeader="false">
		<view slot="gBody" class="grace-flex-v1 grace-border-b" id="gBody">
			<view style="padding:20rpx 25rpx;" id="nav">
				<graceNavBar activeLineBg="#EB5D4B" textAlign="center" activeDirection="center" :items="tabs"
					:currentIndex="swiperCurrentIndex" @change="navChange"></graceNavBar>
			</view>
			<swiper :style="{ height: mainHeight + 'px' }" :current="swiperCurrentIndex" @change="swiperChange">
				<swiper-item v-for="(item, index) in tabs" :key="index">
					<scroll-view scroll-y :style="{ height: mainHeight + 'px' }" @scrolltolower="scrollend">
						<!-- 空数据 -->
						<view style="margin-top:150rpx;" v-if="loadingTypes[index] == 5">
							<graceEmpty>
								<view slot="img" class="empty-view">
									<!-- 请根据您的项目要求制作并更换为空图片 -->
									<image class="empty-img" mode="widthFix"
										src="https://staticimgs.oss-cn-beijing.aliyuncs.com/empty.png"></image>
								</view>
								<text slot="text" class="grace-text-small grace-margin-top grace-gray">暂无订单信息~</text>
							</graceEmpty>
						</view>
						<view class="grace-order grace-box-shadow" v-for="(order, orderIndex) in orders[index]"
							:key="orderIndex" @tap="goOrderDetail(order.order_id)">
							<view class="grace-space-between grace-flex-center">
								<text class="grace-order-number">订单号 : {{ order.order_id }}</text>
								<text class="grace-order-number" style="text-align: right;color: #EB5D4B;"
									v-if="order.order_status_id == 17">等待买家付款</text>
								<text class="grace-order-number" style="text-align: right;color: #EB5D4B;"
									v-if="order.order_status_id == 15">买家已付款</text>
								<text class="grace-order-number" style="text-align: right;color: #EB5D4B;"
									v-if="order.order_status_id == 18">卖家已发货</text>
								<text class="grace-order-number" style="text-align: right;color:#EB5D4B;"
									v-if="order.order_status_id == 19">交易成功</text>
							</view>
							<!-- 以商铺为单位进行循环 -->
							<block>
								<view class="grace-title">
									<text class="grace-black">{{ order.shopName }}</text>
								</view>
								<!-- 循环订单商品 -->
								<view class="grace-order-goods">
									<image :src="gRequest.apiUrlImages + order.orderproduct.image"
										class="grace-order-goods-img" mode="widthFix"></image>
									<text class="grace-order-goods-name">{{ order.orderproduct.name }}</text>
									<view class="grace-order-goods-price" v-if="order.is_jifen_order==1">
										{{ order.orderproduct.price }}积分
										<text class="grace-order-goods-num">x {{ order.orderproduct.quantity }}</text>
									</view>
									<view class="grace-order-goods-price" v-else>
										￥{{ order.total }}
										<text class="grace-order-goods-num">x {{ order.orderproduct.quantity }}</text>
									</view>

								</view>
							</block>
							<!-- 订单底部 -->
							<view class="grace-order-footer"
								style="justify-content: space-between;flex-direction: row;display: flex;">
								<text class="grace-order-number"
									style="text-align: right;">{{ order.date_added }}</text>
							</view>
						</view>
						<!-- 每个选项卡都有一个自己的加载更多  -->
						<graceLoading :loadingType="loadingTypes[index]"></graceLoading>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</gracePage>
</template>
<script>
	import gracePage from '../../graceUI/components/gracePage.vue';
	import graceEmpty from '../../graceUI/components/graceEmptyNew.vue';
	import graceNavBar from '../../graceUI/components/graceNavBar.vue';
	import graceLoading from '../../graceUI/components/graceLoading.vue';
	var request = require('../../graceUI/jsTools/request.js');
	export default {
		data() {
			return {
				swiperCurrentIndex: '',
				tabs: ['全部', '待付款', '待发货', '待收货', '待评价'],
				mainHeight: 300,
				// 订单数据  订单数组和订单状态数组元素一致
				orders: [
					[],
					[],
					[],
					[],
					[]
				],
				// 订单页码
				pages: [1, 1, 1, 1, 1],
				// 加载状态
				loadingTypes: [3, 3, 3, 3, 3]
			};
		},
		onBackPress(event) {
			uni.switchTab({
				url: '/pages/my/my'
			});
			return true;
		},
		onReady: function() {
			setTimeout(() => {
				uni
					.createSelectorQuery()
					.select('#gBody')
					.fields({
						size: true
					}, res => {
						uni
							.createSelectorQuery()
							.select('#nav')
							.fields({
								size: true
							}, res2 => {
								this.mainHeight = res.height - res2.height;
							})
							.exec();
					})
					.exec();
			}, 1000);
		},
		onLoad: function(option) {
			if (option.swiperIndex) {
				this.swiperCurrentIndex = Number(option.swiperIndex);
			} else {
				this.swiperCurrentIndex = 0
			}
		},
		watch: {
			swiperCurrentIndex: function(val) {
				// 如果切换时尚未读取数据则读取
				if (this.orders[this.swiperCurrentIndex].length < 1 && this.loadingTypes[this.swiperCurrentIndex] !=
					5) {
					this.getOrders();
				}
			}
		},
		methods: {
			goOrderDetail(order_id) {
				uni.navigateTo({
					url: "../myorders/orderDetail?id=" + order_id
				})
			},
			navChange: function(e) {
				this.swiperCurrentIndex = e;
			},
			swiperChange: function(e) {
				var index = e.detail.current;
				this.swiperCurrentIndex = index;
			},
			scrollend: function(e) {
				// 避免重复加载
				if (this.loadingTypes[this.swiperCurrentIndex] == 1 || this.loadingTypes[this.swiperCurrentIndex] ==
					2) {
					return;
				}
				this.getOrders();
			},
			getOrders: function() {
				this.loadingTypes.splice(this.swiperCurrentIndex, 1, 1);
				// this.tabs[this.swiperCurrentIndex] 代表向 api 接口传递订单要求返回的订单状态
				// page 代表第几页
				// 接口地址组合
				let order_status_id = '';
				if (this.swiperCurrentIndex == 0) {
					order_status_id = '';
				} else if (this.swiperCurrentIndex == 1) {
					order_status_id = '17';
				} else if (this.swiperCurrentIndex == 2) {
					order_status_id = '15';
				} else if (this.swiperCurrentIndex == 3) {
					order_status_id = '18';
				} else if (this.swiperCurrentIndex == 4) {
					order_status_id = '19';
				}
				this.gRequest.get(
					'/orders/getorderlist', {
						member_id: JSON.parse(uni.getStorageSync('userInfo')).member_id,
						order_status_id: order_status_id,
						page: this.pages[this.swiperCurrentIndex]
					},
					res => {
						if (res.status == '1') {
							// 第一页
							if (this.pages[this.swiperCurrentIndex] == 1) {
								this.orders.splice(this.swiperCurrentIndex, 1, res.data);
								if (res.data.length == 0) {
									this.loadingTypes.splice(this.swiperCurrentIndex, 1, 5);
								}
							}
							// 之后的加载页
							else {
								this.orders[this.swiperCurrentIndex] = this.orders[this.swiperCurrentIndex].concat(
									res.data);
								if (res.data.length < 10) {
									this.loadingTypes.splice(this.swiperCurrentIndex, 1, 5);
									this.loadingTypes.splice(this.swiperCurrentIndex, 1, 2);
								}
							}
							// 页码增加
							this.pages[this.swiperCurrentIndex]++;
							this.loadingTypes.splice(this.swiperCurrentIndex, 1, 3);
						} else {
							if (this.pages[this.swiperCurrentIndex] == 1) {
								if (res.data.length == 0) {
									this.loadingTypes.splice(this.swiperCurrentIndex, 1, 5);
								}
							} // 之后的加载页
							else {
								if (res.data.length < 10) {
									this.loadingTypes.splice(this.swiperCurrentIndex, 1, 5);
									this.loadingTypes.splice(this.swiperCurrentIndex, 1, 2);
								}
							}
						}
					}
				);
			},
			removeorder: function(oid) {
				console.log(oid);
				uni.showModal({
					title: '确认提醒',
					content: '您确定要移除订单 [ ' + oid + ' ] 吗？',
					success: function(e) {
						if (e.confirm) {
							//自行完善删除代码
						}
					}
				});
			}
		},
		components: {
			gracePage,
			graceNavBar,
			graceEmpty,
			graceLoading
		}
	};
</script>
<style>
	.empty-view {
		width: 280rpx;
		height: 280rpx;
		border-radius: 280rpx;
		background-color: #f6f7f8;
		margin-top: 30rpx;
	}

	.empty-img {
		width: 220rpx;
		height: 200rpx;
		margin: 40rpx;
		border-radius: 200rpx;
	}

	.grace-order {
		background-color: #ffffff;
		padding: 20rpx;
		margin: 0 25rpx;
		border-radius: 10rpx;
		margin-top: 30rpx;
		width: 660rpx;
	}

	.grace-shop {
		line-height: 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #333333;
	}

	.grace-order-goods {
		font-size: 0;
		overflow: hidden;
		width: 660rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		padding-bottom: 20rpx;
	}

	.grace-order-goods-img {
		width: 100rpx;
		height: 100rpx;
	}

	.grace-order-goods-name {
		line-height: 40rpx;
		width: 100rpx;
		flex: auto;
		overflow: hidden;
		font-size: 26rpx;
		margin: 0 20rpx;
		color: #333333;
	}

	.grace-order-goods-price {
		font-size: 30rpx;
		line-height: 50rpx;
		color: #333333;
		padding-left: 10rpx;
		font-weight: bold;
	}

	.grace-order-goods-num {
		font-size: 22rpx;
		color: #999999;
		margin-left: 10rpx;
	}

	.icon-close {
		font-size: 28rpx;
		color: #999999;
		margin-left: 30rpx;
	}

	.grace-order-footer {
		margin-top: 2px;
	}

	.grace-order-number {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
	}

	.grace-order-status {
		line-height: 50rpx;
		color: #999999;
		font-size: 26rpx;
		width: 100rpx;
		flex: auto;
		text-align: center;
	}

	.grace-order-btn {
		display: block;
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #999999;
		font-size: 22rpx;
		text-align: center;
		border-radius: 60rpx;
		border: 1px solid #999999;
		margin-left: 20rpx;
	}

	.grace-order-btn-red {
		border-color: #ff0036;
		color: #ff0036;
	}
</style>
